<script setup>
import { onMounted, ref, computed } from 'vue'
import { systemApi } from '@/api'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
const router = useRouter()
const form = ref({
  userPhone: ''
})
const list = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
async function search() {
  const { data, count } = await systemApi.default.querySysUserList({
    ...form.value,
    isFriend: 1,
    pageNo: currentPage.value,
    pageSize: pageSize.value
  })
  list.value = data ?? []
  total.value = count ?? 0
}
onMounted(() => {
  search()
})
async function handleRemove(row) {
  await ElMessageBox.confirm('此操作将删除该数据', '是否继续?')
  await systemApi.default.deleteBypassAccount({ id: row.id })
  ElMessage.success('操作成功')
  search()
}
async function changeStatus({ status, id }) {
  switch (status) {
    case 2:
      await systemApi.default.startBypassAccount({ id })
      break
    case 1:
      await systemApi.default.disableBypassAccount({ id })
      break
  }
  ElMessage.success('操作成功')
  search()
}
const tableActions = row => [
  {
    label: '编辑',
    type: 'primary',
    click: () =>
      router.push({ path: '/system/account-detail', query: { id: row.id } })
  },
  { label: '删除', type: 'danger', click: () => handleRemove(row) },
  (row => {
    if (row.status == 1) {
      return { label: '停用', type: 'danger', click: () => changeStatus(row) }
    } else if (row.status == 2) {
      return { label: '启用', type: 'primary', click: () => changeStatus(row) }
    }
  })(row)
]

const columns = computed(() => [
  {
    prop: 'loginName',
    label: '账号'
    // formatter: row => dayjs(row.createtime).format('YYYY-MM-DD HH:mm:ss')
  },
  {
    prop: 'contacts',
    label: '姓名'
  },
  {
    prop: 'department',
    label: '部门'
  },
  {
    prop: 'roleName',
    label: '角色'
  },
  {
    prop: 'userPhone',
    label: '手机号'
  },
  {
    prop: 'password',
    label: '密码'
  },
  {
    prop: 'status',
    label: '状态',
    formatter: row => (row.status == 1 ? '启用' : '停用')
  }
])
</script>

<template>
  <el-card shadow="never">
    <template #header>
      <div>账号管理</div>
    </template>
    <el-form
      :model="form"
      label-width="90px"
      label-position="left"
      label-suffix="："
    >
      <el-row :gutter="20">
        <el-col :lg="6" :md="8" :sm="12">
          <el-form-item label="账号" prop="userPhone">
            <el-input v-model.trim="form.userPhone" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <div>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button
          type="primary"
          @click="router.push({ path: '/system/account-detail' })"
          >新增</el-button
        >
      </div>
    </el-form>
  </el-card>
  <DeTable
    :data="list"
    :columns="columns"
    :actions="tableActions"
    v-model:pageSize="pageSize"
    v-model:currentPage="currentPage"
    :total="total"
    @onRefresh="search"
  >
  </DeTable>
</template>
